<template>
	<view class="store">
		<view class="top"></view>
		<view class="header">
			<view class="tap" @click="goBeck">
				<image src="https://cdn3.axureshop.com/demo/1989398/images/%E6%88%91%E7%9A%84%E8%AE%A2%E5%8D%95/u591.svg"></image>
			</view>
			<view></view>
		</view>
		
		<view class="center">

			<view class="cen-shop">
				<view class="sh-1">
					
					<view class="sh-box">
						<view class="sh-name">{{storeList.storeName}}</view>
					</view>
					
					<view class="sh-img">
						<image :src="storeList.storePhoto"></image>
					</view>
				</view>
			</view>
				
				<view class="shang">
					<view @click="changeCommodity(1)" :class="[commodity==1?'shang-act':'']">商品</view>
					<view>&nbsp;</view>
					<view>
						<view @click="changeCommodity(2)" :class="[commodity==2?'shang-act':'']">商家</view>
					</view>
					
				</view>	
		</view>

		<view @click="changeCommodity(1)" v-if="commodity==1 & goods_status==true">
			<!-- 导航栏点击 -->
			<view class="bar">
				<view v-for="(item,index) in goodsClassesList" :key="index">
					<view @click="changeState(index)" :class="[state==index?'active':'']">{{item}}</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="box" v-for="(v,i) in goodsClassesList">
				<view class="box-sy"  v-if="state == i">{{v}}</view>
					<view v-for="(item,index) in goodsList" v-if="state==i" @click="go(item.id)">
						<!-- <view class="box-line">&nbsp;</view> -->
						<view class="box-1" v-if="item.goodsClass == i">
							<view class="b1-img">
								<image :src="item.goodsPhoto"></image>
							</view>
							<view class="b1-name">{{item.goodsName}}</view>
						</view>
					</view>
			</view>
		</view>
		
		<view class="goods_wu" v-if="goods_status==false">
			<image src="../../static/暂无数据.png"></image>
		</view>
		<!-- 商家 -->
		<view>
			<view class="store-jia" @click="changeCommodity(2)" v-if="commodity==2">
				<view class="jia-score">
					<view class="jia-score-ping">评分:</view>
					<uni-section title="只读状态" subTitle="使用 readonly 属性设置组件只读" type="line" padding>
						<uni-rate allow-half size="22" :readonly="true" :value="storeList.score" />
					</uni-section>
					<view class="jia-score-shou" @click="pangduan">
						<!--收藏点击事件-->
						<view v-if="check == false">
							<uni-icons type="heart" size="30"></uni-icons>
						</view>
						
						<veiw v-if="check == true">
							<uni-icons type="heart-filled" color="red" size="30"></uni-icons>
						</veiw>
						
					</view>
				</view>
				<view class="jia-name">
					<uni-icons type="person-filled" size="24"></uni-icons>
					<view>老板姓名:</view>
					<view>{{storeList.bossName}}</view>
				</view>
				<view class="jia-phone">
					<uni-icons type="phone" size="24"></uni-icons>
					<view>商家电话:</view>
					<view>{{storeList.phoneNumber}}</view>
				</view>
				<view class="jia-address">
					<uni-icons type="location" size="24"></uni-icons>
					<view>店铺地址:</view>
					<view>{{storeList.storeAddress}}</view>
				</view>
				<view class="jia-coupon">
					<uni-icons type="person-filled" size="24"></uni-icons>
					<view>优惠券</view>
				</view>
				<view class="jia-license">营业执照:</view>
				<view class="jia-license-photo">
					<image src="../../static/测试图片.jpg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/util/http.js'
	export default {
		name:'',
		data(){
			return{
				gid:'',//goods中的id
				id:'',//store中的id
				state:0,
				commodity:1,
				value:4,
				check:false,
				goods_status:true,
				storeList:[],
				goodsClasses:'',
				goodsClassesList:[],//左侧栏
				goodsList:[]  //商品的部分数据
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.id=option.id;
		},
		onShow() {
			this.getStoreById()
			// this.selectUserAndStore()
			this.getGoodsByStoreId()
		},
		onReady() {
			
		},
		methods:{
			// 根据 this.id 查询store中的全部数据
			getStoreById(){
				http({
					url:'/store/getStoreById',
					params:{
						id:this.id
						// id:1
					},
					success:(res) =>{
						// console.log(res)
						if(res.data){
							this.storeList=res.data.data
							this.goodsClasses=res.data.data.goodsClasses
						}
						
						if(this.goodsClasses!=null){
							this.goodsClassesList=this.goodsClasses.split(',')
							// console.log(this.goodsClassesList)
							
						}else{
							this.goods_status=false
							// console.log(this.goods_status)
						}
					}
				})
			},
			//根据store的id 查询goods中的部分数据
			getGoodsByStoreId(){
				http({
					url:'/goods/getGoodsByStoreId',
					params:{
						// storeId:1
						storeId:this.id
					},
					success:(res) =>{
						// console.log(res)
						this.goodsList=res.data.data
						this.selectUserAndStore()
					}
				})
			},
			// 点击收藏键 测加入收藏店铺列表 
			insertByUserIdAndStoreId(){
				http({
					url:'/userStore/insertByUserIdAndStoreId',
					method:'post',
					data:{
						userId:uni.getStorageSync('uid'),
						storeId:this.id
					},
					success:(res)=>{
						this.check = true
					}
				})	
			},
			// 点击收藏键 从收藏店铺列表中移除
			removeByUserIdAndStoreId(){
				http({
					url:'/userStore/removeByUserIdAndStoreId',
					method:'post',
					data:{
						userId:uni.getStorageSync('uid'),
						storeId:this.id
					},
					success:(res)=>{
						this.check = false
						// console.log(res)
					}
				})
			},
			// 查询是否收藏
			selectUserAndStore(){
				http({
					url:'/userStore/selectUserAndStore',
					params:{
						userId:uni.getStorageSync('uid'),
						storeId:this.id
					},
					success:(res)=>{
						// console.log(res)
						if(res.data.data != null){
							this.check=true
						}
					}
				})
			},
			pangduan(){
				// console.log(this.check)
				if(this.check==false){
					this.insertByUserIdAndStoreId()
				}else{
					this.removeByUserIdAndStoreId()
				}
			},
			// 返回原来的地方
			goBeck(){
				uni.navigateBack({
					
				})
			},
			// 跳转到shop/commodity页面
			go(gid){
				uni.navigateTo({
					url:"/pages/shop/commodity?id="+gid
				})
			},
			// 左侧导航栏点击
			changeState(state){
				this.state=state
			},
			// 商品，商家点击
			changeCommodity(commodity){
				this.commodity=commodity
			},
		},
		// vue 的生命周期
		mounted() {
			
		}
	}
</script>

<style scoped>
	
	.store{
		
	}
	.top{
		width: 100%;
		height: 25px;
		position: fixed;
		top: 0;
		z-index: 2;
		background-color: #ffffff;
	}
	.header{
		position: fixed;
		top: 60rpx;
		width: 100%;
		z-index: 2;
		display: flex;
		background-color: #f0eff4;
		border-bottom: 1px solid gainsboro;
	}
	.tap{
		margin-left: 40rpx;
		height: 60rpx;
		display: flex;
		
	}
	.tap image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		
	}
	.center{
		background-color: #f0eff4;
	}
	.cen-shop{
		width: 100%;
		height: 90px;
		position: fixed;
		top: 50px;
		z-index: 10;
		display: flex;
		justify-content: center;
		background-color: #f0eff4;
	}
	.sh-1{
		width: 80%;
		display: flex;
		border-radius: 10px;
		background-color: #ffffff;
	}
	.sh-box{
		width: 150px;
	}
	.sh-name{
		/* 上 右 下 左*/
		padding: 10px 0 0 10px;
	}
	.sh-img{
		width: 80px;
		position: fixed;
		left: 190px;
		top: 55px;
	}
	.sh-img image{
		width: 100%;
		height: 70px;
		margin: 5px;
		border-radius: 10px;
	}
	/* 商品/优惠券 */
	.shang{
		height: 20px;
		margin-top: 5px;
		padding-left: 70px;
		padding-right: 70px;
		background-color: #ffffff;
		position: fixed;
		top: 135px;
		z-index: 2;
		display: flex;
	}
	.shang view{
		font-size: 14px;
	}
	.shang view:nth-child(2){
		width: 110px;
	}
	.shang-act{
		border-bottom: 1px solid #ff0000; 
		background-color: #ffffff;
	}	
	/* 左侧 */
	.bar{
		position: fixed;
		left: 0;
		top: 40%;
		transform: translateY(-50%);
		z-index: 10;
		width: 80px;
		background-color: #f0eff4;
		
		
	}
	.bar view{
		font-size: 14px;
		margin-top: 20rpx;
		padding-left: 10px;
		height: 80rpx;
	}
	.active{
		color: #3399CC;
		border-left: 1px solid #3399CC; 
		background-color: #ffffff;
	}
	/* 列表 */
	.box{
		margin-top: 3px;
		margin-left: 5px;
		position: relative;
		left: 75px;
		top: 160px;
		width: 240px;
		z-index: 0;
		background-color: #ffffff;
	}
	.box-sy{
		font-size: 14px;
		/* height: 5px; */
		background-color: #f0eff4;
		border-left: 4px solid #ff0000;
	}
	
	.box-1{
		margin-top: 3px;
		margin-left: 8px;
		padding-bottom: 5px;
		display: flex;
		border-radius: 10px;
		background-color: #ffffff;
	}
	.b1-img{
		width: 80px;
		height: 80px;
	}
	.b1-img image{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.b1-name{
		margin: 5px;
	}
	/*暂无数据*/
	.goods_wu{
		position: relative;
		top: 170px;
	}
	.goods_wu>image{
		width: 100%;
	}
	/* 商家 */
	.store-jia{
		position: fixed;
		top: 158px;
		width: 100%;
		background-color: #f0eff4;
	}
	.store-jia view{
		margin-top: 5px;
		padding-bottom: 3px;
		display: flex;
		background-color: #ffffff;
	}
	.store-jia view .uni-icons{
		margin-top: 5px;
	}
	.jia-score{
		height: 40px;
		padding-top: 10px;
		padding-left: 20px;
	}
	.jia-score uni-section{
		margin: 5px;
		margin-top: 5px;
		
	}
	.jia-score-shou{
		position: relative;
		left: 70px;
	}
	.jia-score-shou image{
		width: 20px;
		height: 20px;
	}
	.jia-license-photo image{
		margin: 5px;
		padding-left: 5px;
		width: 120px;
		height: 100px;
	}
</style>